<template>
  <div>
    <!-- 表头分开写 -->
    <div></div>
    <!-- 表格内容 -->
    <div class="table-container" :style="customTableFlex">
      <!-- 表格区域 -->
      <!-- 表头部分 -->
      <div class="table-header">
        <table>
          <thead>
            <tr>
              <th v-for="(column, index) in columns" :key="index" :style="{ height: '40px', width: column.width }">
                {{ column.label }}
              </th>
            </tr>
          </thead>
        </table>
      </div>

      <div class="table-location">
        <div class="table-wrapper table1" :style="{ height: computedHeight }">
          <table>
            <tbody>
              <tr v-for="(row, rowIndex) in data" :key="rowIndex"
                :class="{ 'table-row-selected': row.isSelected, 'table-row': !row.isSelected }"
                @mouseover="handleHover(row, rowIndex)" @mouseleave="handleMouseLeave(row, rowIndex)"
                @click="handleClick(row, rowIndex)" :style="{ height: '32px', pointerEvents: 'auto' }">
                <td :style="{ width: columns[0].width }">
                  <template>
                    {{ rowIndex + 1 }}
                  </template>
                </td>

                <!-- 后续列：显示原数据 -->
                <td v-for="(column, colIndex) in columns.slice(1)" :key="colIndex" :style="{ width: column.width }">
                  <template>
                    {{ row[column.prop] }}
                  </template>
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <div class="outer-container" @click="openPopup">
          <div class="inner-container">
            <img src="../assets/img/module6/add.png" class="add">
          </div>
        </div>

        <!-- 展开和收起按钮 -->
        <!-- <button v-if="data.length > 10 && data.length < 17 && pageLengthnum === 1" class="table-retract-button-ps"
          @click="retractTable" :style="{
            // top: buttonHeightForRetract(data.length),
            pointerEvents: 'auto',
          }"></button>
        <button v-if="data.length >= 11 && pageLengthnum === 0" class="table-expand-button" @click="expandTable" :style="{
          // top: buttonHeightList[pageLengthnum],
          pointerEvents: 'auto',
        }"></button>
        <button v-if="pageLengthnum === 1 && data.length >= 17" class="table-retract-button-ps" @click="retractTable"
          :style="{
            // top: buttonHeightList[pageLengthnum],
            pointerEvents: 'auto',
          }"></button> -->
      </div>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      isSelected: false,
      pageLengthnum: 0,
      pageLengList: ['36.2vh', '44.8vh'],
      buttonHeightList: ['36.2vh', '44.8vh'],
    };
  },
  name: "CustomTableModule2PlanningScheme",
  props: {
    data: {
      type: Array,
      required: true,
    },
    columns: {
      type: Array,
      required: true,
    },
    height: {
      type: String,
      default: '100%'
    }
  },
  computed: {
    // 动态生成弹窗样式
    customTableFlex() {
      return {
        height: this.height
      };
    },
    computedHeight() {
      // 根据数据长度计算表格高度
      if (this.data.length <= 10) {
        return `${3.284 * this.data.length}vh`;
      } else {
        return this.pageLengList[this.pageLengthnum];
      }
    },

  },
  methods: {
    handleHover(row, index) {
      if (!this.isSelected) {
        this.$emit('viewDetailsHover', row);
      }
    },
    handleMouseLeave(row, index) {
      if (!this.isSelected) {
        this.$emit('hoverLeave', row);
      }
    },
    handleClick(clickedRow, index) {
      // 重置所有行的 isSelected 状态为 false，并使用 this.$set 确保响应式更新
      this.data.forEach(row => {
        this.$set(row, 'isSelected', false); // 使用 $set 保证 Vue 响应式追踪
      });
      this.$set(clickedRow, 'isSelected', true); // 更新点击的行为选中状态
      this.$emit('viewDetails', clickedRow);
      this.isSelected = true;
    },
    resetSelection() {
      this.data.forEach(row => {
        this.$set(row, 'isSelected', false); // 确保响应式更新
        this.isSelected = false;
      });
    },
    expandTable() {
      this.pageLengthnum = this.pageLengthnum + 1;
    },
    retractTable() {
      this.pageLengthnum = this.pageLengthnum - 1;
    },
    buttonHeightForRetract(length) {
      // 根据数据长度计算收起按钮的高度
      const rowHeight = 3.284;
      return length * rowHeight + "vh";
    },
    // 点击 div 后，触发父组件的弹窗打开事件
    openPopup() {
      this.$emit('open-popup');  // 发送事件给父组件
    }
  }
};
</script>

<style scoped>
.table-header {
  position: sticky;
  top: 0;
  background-color: transparent;
  z-index: 10;
  background-size: 100% 100%;
  /* width: 70%; */
}

/* 外层容器，使用 flex 布局 */
.table-container {
  position: absolute;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  pointer-events: none;
  /* background-color: yellow; */
}

/* 表格区域，设置为可滚动部分 */
.table-wrapper {
  /* flex-grow: 1; */
  height: 39vh;
  /* 设定表格容器的最大高度 */
  overflow-y: auto;
  /* 启用垂直滚动 */
  -ms-overflow-style: none;
  /* 隐藏滚动条:IE 和 Edge 浏览器 */
  scrollbar-width: none;
  /* 隐藏滚动条:Firefox 浏览器 */
}

/* 隐藏滚动条（适用于 WebKit 浏览器） */
.table-wrapper::-webkit-scrollbar {
  display: none;
  /* 隐藏滚动条 */
}

/* 表头样式 */
thead {
  background-color: transparent;
  /* 半透明背景，避免内容与表头重叠 */
  background-image: url(../assets/img/module2/thead.png);
  /* 从浅绿色渐变到透明 */
  position: sticky;
  background-size: 100% 100%;
  top: 0%;
  z-index: 2;
  /* 确保表头位于表格内容之上 */
  /* backdrop-filter: blur(5px);  */
}

/* 
.table1::-webkit-scrollbar{
  width:0.125rem;
  background-color: rgba(0,16,29,0.5)!important;
}

.table1::-webkit-scrollbar-thumb{
  background:#0378FF;
  border-radius:0.625rem;
} */



/* 表格样式 */
table {
  width: 80%;
  height: 60%;
  border-collapse: collapse;
  background-color: transparent;
  border-collapse: separate;
  /* 不合并单元格边框 */
  border-spacing: 0 3px;
  /* 为行设置 5px 的垂直间距 */

}

/* 表头单元格样式 */
th {
  /* padding: 1px; */
  text-align: left;
  color: #ffffff;
  border-bottom: 1px solid #ddd;
  font-size: 14px;
  font-weight: normal;
  padding-left: 15px;
  border: none;
  font-family: AlibabaPuHuiTi_2_65_Medium;
  font: 14px;

}

/* 表格内容单元格样式 */
td {
  /* padding: 1px; */
  text-align: left;
  color: #ffffff;
  border: none;
  font-size: 14px;
  font-weight: normal;
  padding-left: 15px;
  font-family: AlibabaPuHuiTi_2_55_Regular;
  font-size: 14px;
}

/* 表格行的背景色样式 */
.table-row {
  z-index: 1;
  transition: background-color 0.3s ease;
  background-image: url('../assets/img/module2/table.png');
  background-size: cover;
}

.table-row-selected {
  z-index: 1;
  background-image: url('../assets/img/module2/rowselect.png');
  transition: background-color 0.3s ease;
  background-size: cover;
}

/* 悬停行的背景色 */
.table-row:hover {
  background-image: linear-gradient(to right, rgb(127, 140, 222), rgba(255, 255, 255, 0));
  background-color: rgba(58, 58, 58, 0.5);
}

.table-location {
  position: absolute;
  top: 45px;
  left: 0%;
  width: 100%;
  height: 100%;
  /* background-color: white; */
}

.table-expand-button {
  position: absolute;
  background-image: url(../assets/img/module2/zhankai.png);
  background-size: 100% 100%;
  /* top: 39vh; */
  left: 37.5%;
  background-color: transparent;
  width: 25px;
  height: 25px;
  border: none;
  cursor: pointer;
}

.table-retract-button-ps {
  position: absolute;
  background-image: url(../assets/img/module2/shouqi.png);
  background-size: 100% 100%;
  /* top: 39vh; */
  left: 37.5%;
  background-color: transparent;
  width: 25px;
  height: 25px;
  border: none;
  cursor: pointer;
}

.table1::-webkit-scrollbar {
  width: 2px;
}

.table1::-webkit-scrollbar {
  background-color: rgba(0, 16, 29, 0.5) !important;
}

.table1::-webkit-scrollbar-thumb {
  background: #0378FF;
  border-radius: 10px;
}

.outer-container {
  padding: 0.5rem 0.1rem 0 0.1rem;
  width: 80%;
  height: 2.5rem;
  pointer-events: auto;
}

.inner-container {
  width: 100%;
  height: 1.5rem;
  /* background-color: rgba(0, 16, 29, 0.5); */
  background-color: rgb(112 136 156 / 24%);
  display: flex;
  /* 添加 flex 布局 */
  align-items: center;
  /* 使内容垂直居中 */
  justify-content: center;
  /* 可选：水平居中 */
}

.add {
  width: 20px;
  height: 20px;
}
</style>
